<template>
  <!--
    el-upload 属性介绍

    1. list-type="picture-card"  设置上传组件的样式 为 照片墙

    2. action 必填 本身用于设置图片服务器的地址, 将来ele会帮你自动发送请求到指定的图片服务器!!
      我们将来手动自己发送请求上传图片!!!
      为了不报错 可以给''  #

    3. file-list 设置上传组件的默认展示图片  是个数组,里面是一个个对象,每个对象就是一张图片,必须要有url属性

    4. on-preview 配置是将来点击+号预览时需要触发的函数
        必须配置该属性 才有+号!!

    5. limit  传一个数字 用于限制最大上传数量

    6. on-remove 配置一个函数 将来在点击删除时 自动触发

    7. http-request 配置一个函数,走我们自己的请求逻辑 覆盖默认的上传行为，可以自定义上传的实现

    8. on-change 配置一个函数 添加文件、上传成功和上传失败时都会被调用

    9. before-upload 配置一个函数 用于文件校验

  -->
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="count"
      :class="{ disabled: disabled }"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <el-dialog title="图片预览" :visible="showImg" @close="showImg = false">
      <img :src="imgSrc" alt="" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
// 下载axios => 导入axios => 新建axios实例 => axios.post('xxxxx')
// 请求腾讯云存储桶:
// 1. 下载  cos-js-sdk-v5

// 2. 引入 包cos-js-sdk-v5
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)

// 3. 新建实例
// SecretId: AKIDJgofFpfVUQ9C0Xr5Xjd6ID4B8oFPLxLT
// SecretKey: WnsjKjslM8dtrbB6lciUzDBwSnxHI2Vh

const cos = new COS({
  SecretId: 'AKIDJgofFpfVUQ9C0Xr5Xjd6ID4B8oFPLxLT', // 身份识别ID
  SecretKey: 'WnsjKjslM8dtrbB6lciUzDBwSnxHI2Vh' // 身份秘钥
})

// 4. 实例发请求
// cos.putObject

export default {
  props: {
    count: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [

      ],
      showImg: false,
      imgSrc: ''
    }
  },
  computed: {
    disabled() {
      return this.fileList.length >= this.count
    },
    isAllUpload() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePreview(file) {
      console.log('你点了+号 准备预览啦...', file)
      this.showImg = true
      this.imgSrc = file.url
    },
    handleRemove(file, fileList) {
      // file => 将要删除的图片
      // fileList => 结构中的图片列表
      // this.fileList => 自己维护的数据层面的图片列表

      // 点击删除时, 仅仅是结构被你删了 但是数据没删!!! => 矛盾点: 数据没更新啊 => 更新一下自己的this.fileList
      // 1. 利用结构中的图片列表(自动更新)
      // this.fileList = [...fileList] // 数据独立
      console.log('有人动垃圾桶了...', file, fileList, this.fileList)

      // 2. 手动过滤
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    handleUpload({ file }) {
      // obj.file => 待上传的文件对象
      console.log('去上传吧', file) // 需要我们自己实现请求上传图片

      const fileObj = this.fileList.find(item => item.uid === file.uid)

      fileObj.status = 'uploading' // 开启进度条

      cos.putObject({
        Bucket: 'hrsaas-102-1304657626', // 完整的存储桶名称
        Region: 'ap-shanghai', // 存储桶所在的地域
        Key: parseInt(Math.random() * 999999) + file.name, // 设置图片存储的名字
        Body: file,
        // 用于进度条
        onProgress: (progressData) => {
          // progressData 就是一个对象 里面存了当前上传的进度
          // 图片每上传一丢丢, 这个函数就会执行一次
          console.log(JSON.stringify(progressData))
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, function(err, data) {
        // 成功/失败 时 都会执行
        if (err) {
          console.log(err)
          return
        }
        console.log(data)

        // 防止网络太快 看不到进度条 手动做个延时
        setTimeout(() => {
          fileObj.status = 'success' // 更新状态
        }, 1000)

        fileObj.url = 'https://' + data.Location // 更新路径
      })
    },
    handleChange(file, fileList) {
      this.fileList = [...fileList]
    },
    beforeUpload(file) {
      // 一般在这里对即将上传的文件对象做校验
      // 你希望通过校验 return true; 不通过校验  return false  意味着不会执行上传
      const flag = file.size / 1024 / 1024 < 2

      if (!flag) {
        this.$message.error('文件大小不能超过2M')
        return false
      }

      return true
    }
  }
}
</script>

<style lang='scss' scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}

</style>
